<template>
<div class="progress-bar" :style="{width: width+'px'}">
  <div class="bar" :style="{width: value+'%'}"></div>
</div>
</template>

<script>
export default {
  name: 'progress-bar',
  props: {
    value: {
      type: Number || String,
      default: 0
    },
    width: {
      // type: Number || String,
      default: 150
    }
  }
}
</script>

<style scoped lang="stylus">
.progress-bar{
  height 14px
  background-color #D3D3D3
  border-radius 4px
  overflow hidden
  .bar{
    height 100%
    transition width linear 300ms
    background-image linear-gradient(to right, #44d8c6, #51a8e1, #5f77fd)
    border-radius 4px
  }
}
</style>
